﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>about</title>
     <link href="../../Content/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/vue-2.6.11/dist/vue.min.js" type="text/javascript"></script>
    <script src="../../Content/element-ui/lib/index.js" type="text/javascript"></script>
    <script src="../../Content/axios/dist/axios.min.js" type="text/javascript"></script>
    <style>
        
        html,body,#app {height: 100%;margin:0px}
    .el-row {
    margin-left:10px;
      margin-top: 20px;
  }
 
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0px;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight:normal;
}
    </style>
</head>
<body>
    <div id="app">
    <el-container style="height:100%;">
  <el-header height="52px">
<el-row>
 <a href="/site/addbaner"><el-button type="primary" size="small" icon="el-icon-circle-plus-outline" >新增</el-button></a>
 <el-button  type="danger" size="small" icon="el-icon-delete" v-on:click="del" >批量删除</el-button>
 </el-row></el-header>
  <el-main><el-row>
     <el-table
    :data="tableData"
    border
    size="small"
    style="width: 100%"
     v-on:selection-change="handleSelectionChange">
     <el-table-column
      type="selection"
      width="55">
    </el-table-column>
   
    <el-table-column
      prop="note"
      label="标题"
      width="180">
    </el-table-column>
   
     <el-table-column label="缩略图" width="280">
      <template slot-scope="scope">
      <el-image
      style="width: 200px; height: 100px"
      :src=scope.row.imgurl
      fit="contain"></el-image>
      </template>
    </el-table-column>

     <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-button
          size="mini"
          v-on:click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
           v-on:click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

   </el-row></el-main>
  <el-footer height="60px"><div class="block">
    
    <el-pagination
      v-on:size-change="handleSizeChange"
      v-on:current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[10,20, 50, 100]"
      :page-size=pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total=totalcount>
    </el-pagination>
  </div></el-footer>
</el-container>



    
 

    </div>
     <script type="text/javascript">
        

		new Vue({
            el : '#app',
            data(){
                return {
                  currentPage: 1,
                  pagesize:10,
                  totalcount:0,
                  multipleSelection:[],
                  tableData: []
                }
            },
            created() {
                let that=this;
				that.loaddata();
            },
            methods : 
            {
                transformRequest(data){
                    let params = '';
                    for(let index in data){
                        params += index + '=' + data[index] + '&';
                    }
                    return params;
                },
                loaddata(){
                   let that=this;
                   axios.post('/Site/getbanerlist',that.transformRequest({start:(that.currentPage-1)*that.pagesize,limit:that.pagesize})).then(function(response){
                             if(response.data!=""){
				 			    that.tableData=response.data.data;
                                that.totalcount=response.data.total;
                             }
                        })
                

                },
				handleEdit(index, row){
               
                   window.location.href="/Site/addbaner?id="+row.id;
                },
                handleDelete(index, row){
                let that=this;
				this.$confirm('确认删除？').then(_ => 
                {
                    axios.post('/Site/batchdelbaner', that.transformRequest({
                        ids : row.id
                    })).then(function(response){
                        let result = JSON.parse(response.data);
                        if(result.success){
                            that.$message({
                                message : result.msg,
                                type : 'success',
                                duration : '500',
                                onClose : function(){
                                    that.loaddata();
                                }
                            });
                            
                        }
                        else{
                            that.$message.error(result.msg);
                        }
                    })
                })
                },
				handleSizeChange(val){
                     this.pagesize=val;
                     this.loaddata();
                },
                handleCurrentChange(val){
                    this.currentPage=val;
                    this.loaddata();
                },
                searchdata(){
                    this.loaddata();
                },
                handleSelectionChange(val){
                    this.multipleSelection = val;
                },
                del(){
                   let that=this;
                    
				if(this.multipleSelection.length == 0){
                    this.$message({
                        type : 'info',
                        message : '请你选择要删除的记录'
                    });
                }
                else{ 
					this.$confirm('确认删除？').then(_ => 
                    {
                        var _ids = '';
                        for(var i = 0; i < this.multipleSelection.length; i ++ ){
                            _ids += this.multipleSelection[i].id + ",";
                        }
                        axios.post('/Site/batchdelbaner', that.transformRequest({
                            ids : _ids
                        })).then(function(response){
                            let result = JSON.parse(response.data);
                            if(result.success){
                                that.$message({
                                    message : result.msg,
                                    type : 'success',
                                    duration : '500',
                                    onClose : function(){
                                        that.loaddata();
                                    }
                                });
                                
                            }
                            else{
                                that.$message.error(result.msg);
                            }
                        })
                    })
                }
               
                }
            }
        });




    </script>
</body>
</html>
